export const Editable = (func: any) => {
  return {
    name: 'editable',
    props: [],
    events: [],
    render(moveable: any, React: any) {
      const rect = moveable.getRect()
      const { pos2 } = moveable.state
      const EditableViewer = moveable.useCSS(
        'div',
        `
        {
            position: absolute;
            left: 0px;
            top: -2px;
            will-change: transform;
            transform-origin: 0px 0px;
        }
        .custom-button {
            width: 18px;
            height: 18px;
            margin-bottom: 2px;
            background: #4af;
            appearance: none;
            border: 0;
            color: white;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
        }
            `
      )
      return React.createElement(
        EditableViewer,
        {
          key: 'editable-viewer',
          className: 'moveable-editable',
          style: {
            transform: `translate(${pos2[0]}px, ${pos2[1]}px) rotate(${rect.rotation}deg) translate(12px)`
          }
        },
        [
          '\n            ',
          React.createElement(
            'div',
            {
              className: 'custom-button',
              onClick: () => func('increase')
            },
            ['+']
          ),
          '\n            ',
          React.createElement(
            'div',
            {
              className: 'custom-button',
              onClick: () => func('decrease')
            },
            ['-']
          )
        ]
      )
    }
  }
}
